<template>
  <!-- 漫游 -->
  <div class="roaming-box" :class="{ hid: _rbToggle }" v-show="_enable">
    <div class="rb-content">
      <div class="rb-btns">
        <button class="showhide" @click="_rbToggle = !_rbToggle">
          <!-- {{ _rbToggle ? '显示' : '隐藏' }} -->
        </button>
        <button class="exit" @click="hBegin(false)"></button>
      </div>
      <div class="rb-bg"></div>
      <div class="rb-value">
        <div class="rb-set">
          <div>
            <span class="left_btn" @click="hSpeed(-0.1)"></span>
            <p>{{ _speed.toFixed(2) }}</p>
            <span class="right_btn" @click="hSpeed(0.1)"></span>
          </div>
          <div>
            <span class="left_btn" @click="hEyeHeight(-0.2)"></span>
            <p>{{ _eyeHeight.toFixed(2) }}12312</p>
            <span class="right_btn" @click="hEyeHeight(0.2)"></span>
          </div>
          <div>
            <span class="left_btn" @click="hJumpHeight(-0.2)"></span>
            <p>{{ _jumpHeight.toFixed(2) }}</p>
            <span class="right_btn" @click="hJumpHeight(0.2)"></span>
          </div>
          <!-- <input type="number" min="0.01" v-model="_speed" step=".1" />
          <input type="number" v-model="_eyeHeight" step="0.2" />
          <input type="number" min="0.1" v-model="_jumpHeight" /> -->
        </div>
      </div>
    </div>
    <!-- 	<div class="begin-btn" v-show="!_enable">
			<button @click="hBegin(true)">开始漫游</button>
		
		<div class="rb-content" v-show="_enable">
			<div class="remark">
				操作提示 前进（<span>W</span>），后退（<span>S</span>）左移（<span>A</span>），右移（<span>D</span>）<br />
				跳起（<span>空格Space</span>）
				退出漫游（<span>ESC</span>）

			</div>
			<div class="rb-set">
				<label>移动速度</label>
				<input type="number" min="0.01" v-model="_speed" step=".1" />
				&nbsp;&nbsp;<label>漫游高度设置</label>
				<input type="number" v-model="_eyeHeight" step="0.2" />
				&nbsp;&nbsp;<label>跳起高度</label>
				<input type="number" min="0.1" v-model="_jumpHeight" />
			</div>
			<div class="rb-btns">

				<div class="b4box">
					<button @mousedown="hModMove(0,-1)" @touchstart="hModMove(0,-1)">W</button>
					<button @losecapture="hLose()" @mousedown="hModMove(-1,0)" @touchstart="hModMove(-1,0)">D</button>
					<br />
					<button @mousedown="hModMove(1,0)" @touchstart="hModMove(1,0)">A</button>
					<button @mousedown="hModMove(0,1)" @touchstart="hModMove(0,1)">S</button>
				</div>
				<div class="b2box">
					<button @click="hBegin(false)">退出漫游（ESC）</button>
				</div>
			</div>
		</div>
	
	</div> -->
  </div>
</template>

<script setup>
import { computed, watch, ref, onUnmounted, onMounted, nextTick, toRefs } from 'vue'

import { useStore } from 'vuex'

const { pgShow, scene3d } = toRefs(useStore().state)

const _enable = ref(false)
const _speed = ref(0.1)
const _jumpHeight = ref(2)
const _rbToggle = ref(false)
const _eyeHeight = ref(0)
watch(
  () => _eyeHeight.value,
  (p, l) => {
    var h = +p - +l // _eyeHeight.value;
    window.s3d.SetEyeHeight(h)
    console.log('漫游高度', h)
  }
)

watch(
  () => _enable.value,
  (p, l) => {
    hSetEnable(_enable.value)
  }
)
const hRbToggle = (v) => { }
const hSetEnable = (v) => {
  if (v) {
    document.addEventListener('keydown', hKeyDown, false)
    document.addEventListener('keyup', hKeyUp, false)
  } else {
    document.removeEventListener('keydown', hKeyDown)
    document.removeEventListener('keyup', hKeyUp)
    _actk.value = []
  }
}
var _k = {
  w: 'w',
  a: 'a',
  s: 's',
  d: 'd',
  escape: 'escape',
  space: 'space'
}
const _actk = ref([])
const _kjum = ref('')
const hKeyDown = (e) => {
  var _kdown = e.key.toLowerCase() //"w" 	//e.code: "KeyW"
  var aks = _actk.value
  if (aks.indexOf(_kdown) > -1) {
    return
  }
  switch (_kdown) {
    case _k.w:
      aks.push(_kdown)
      break
    case _k.a:
      aks.push(_kdown)
      break
    case _k.s:
      aks.push(_kdown)
      break
    case _k.d:
      aks.push(_kdown)
      break
    case _k.escape:
      hBegin(false)
      break
    default:
      if (e.code.toLowerCase() == _k.space) {
        if (_kjum.value == _k.space) {
          return
        }
        _kjum.value = _k.space
        window.s3d.SetJump(_jumpHeight.value)
      }
      break
  }
  //_actk.value = aks;
  console.log('key ', e)
}
const hDo = (k) => {
  switch (k) {
    case _k.w:
      hModMove(0, -1)
      break
    case _k.a:
      hModMove(1, 0)
      break
    case _k.s:
      hModMove(0, 1)
      break
    case _k.d:
      hModMove(-1, 0)
      break
    default:
      break
  }
}
const hKeyUp = (e) => {
  var kdown = e.key.toLowerCase()
  var aks = [..._actk.value]
  var i = aks.indexOf(kdown)
  if (i > -1) {
    aks.splice(i, 1)
    _actk.value = aks
  }
  _kjum.value = null // e.code.toLowerCase();
  hCheck()
}
const hLose = () => {
  console.log('lose')
}
const hBegin = (v) => {
  if (_enable.value == v) return
  _rbToggle.value = false
  console.log('开始漫游', _enable)
  _enable.value = v
  window.s3d.SetEye(v)

  if (v) {
    var h = _eyeHeight.value
    //__hSetEyeHeight(h);
  }
}
//x左右，y前后
const hModMove = (x, y) => {
  var speed = _speed.value
  window.s3d.SetEyeMove({
    x: x * speed,
    z: y * speed,
    y: 0
  })
}

var h = -1
const hCheck = () => {
  clearTimeout(h)
  var aks = _actk.value
  for (var i in aks) {
    hDo(aks[i])
  }
  h = setTimeout(function () {
    hCheck()
  }, 50)
}

const hSpeed = (v) => {
  _speed.value + v > 0.1 ? (_speed.value += v) : (_speed.value = 0.1)
}
const hJumpHeight = (v) => {
  _jumpHeight.value + v > 2 ? (_jumpHeight.value += v) : (_jumpHeight.value = 2)
}
const hEyeHeight = (v) => {
  _eyeHeight.value + v > 0 ? (_eyeHeight.value += v) : (_eyeHeight.value = 0)
}

const props = defineProps({
  begin: {
    type: Boolean
  }
})
defineExpose({
  hBegin
})
onMounted(() => {
  nextTick(() => {
    hCheck()
  })
})
onUnmounted(() => {
  clearTimeout(h)
  hSetEnable(false)
})
</script>
<style lang="scss" scoped>
.rb-btns {
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  width: 80px;
  height: 30px;
  position: absolute;
  z-index: 1;
  top: 15px;
  right: 20px;
  /* transform: translate(calc(50% + 27px), -7px); */
  align-items: center;
}

.rb-btns button {
  /* background: #fff;
		box-shadow: 1px 1px 1px #eee;
		border-radius: 2px; */
  border: none;
  font-weight: bold;
  background-size: 100% 100%;
  width: 80px;
  height: 30px;
  color: #eee;
}

.backhome,
.begin-btn button {
  width: 100%;
  height: 100%;
  font-size: 12px;
  color: #eee;
  background: rgb(80 80 80 / 50%);
  box-shadow: 1px 1px 3px #eeeeee70;
  border-radius: 2px;
  letter-spacing: 2px;
  transform: translate(-50%, 0);
}

.roaming-box {
  position: absolute;
  pointer-events: all;
  width: 0;
  bottom: -100px;
  // right: 50vw;
  letter-spacing: 2px;
  transition: 0.5s all;
}

.roaming-box.hid {
  // transform: translate(0, calc(100% - 20px));
  bottom: 250px;

  .rb-content {
    transform: scale(0.5);
  }
}

.begin-btn {
  width: 80px;
  height: 40px;
  margin: 1em;
}

.rb-btns button.showhide {
  background-image: url(/imgs/roaming/hid.png);
  width: 37px;
  height: 23px;
}

.rb-btns button.exit {
  background-image: url(/imgs/roaming/close.png);
  width: 37px;
  height: 35px;
}

.rb-content {
  color: #eee;
  /* background-color: rgba(0, 0, 0, .5); */
  /* transform: translate(-50%, 0); */
  width: 721px;
  height: 349px;
  /* min-width: 200px; */
  padding: 5px 10px;
  background-image: url(/imgs/roaming/bg.png);
  background-size: 100% 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 500px;
  left: -30px;
}

.rb-content .rb-bg {
  height: 80%;
  width: 60%;

  /* background-image: url(/imgs/roaming/wasd.png); */
  background-size: 100% 100%;
}

.rb-content .rb-value {
  height: 70%;
  width: 20%;
  margin-left: 5%;
  /* background-image: url(/imgs/roaming/value.png); */
  background-size: 88% 80%;
  background-position: top;
  margin-top: 4%;
}

.rb-content .remark {
  text-align: left;
  margin-bottom: 10px;
}

.rb-content .remark span {
  color: #00dcff;
  font-size: 16px;
  text-decoration: underline;
  /* text-decoration-style: wavy; */
}

.rb-set {
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: flex-start;
  margin: 10px 0;

  div {
    display: flex;
    align-items: center;
    width: 150px;
    justify-content: space-between;

    p {
      font-family: FZCuYuan-M03S;
      font-weight: 400;
      font-size: 27px;
      color: linear-gradient(221deg, #ffffff 0%, #d1d8ef 100%);
      line-height: 21px;
      text-shadow: 1px 3px 16px rgba(10, 59, 147, 0.78);
    }

    .left_btn {
      width: 40px;
      height: 34px;
      background-image: url(/imgs/roaming/减.png);
      background-size: 100% 100%;
    }

    .right_btn {
      width: 40px;
      height: 34px;
      background-image: url(/imgs/roaming/加.png);
      background-size: 100% 100%;
    }
  }
}

.rb-value .rb-set {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100%;
  align-items: flex-start;
  // padding-left: 10%;
}

.rb-set>* {
  display: inline-flex;
  padding: 0 3px;
}

.rb-set input:focus {
  border: none;
}

.rb-set input {
  width: 60px;
  text-align: center;
  border: none;
  line-height: 20px;
  appearance: none;
  outline: none;
}

.rb-value input {
  background: #245275;
  border-radius: 6px;
  height: 30px;
  color: #eed40a;
  font-weight: 600;
}

.b4box {
  transform: rotate(45deg);
}

.rb-content .b4box button {
  transform: rotate(-45deg);
  width: 30px;
  height: 30px;
}
</style>
